<template>
  <div>
    <top-header :isLeft="true" title="选择地址"></top-header>
    <div class="city_search">
      <a-input placeholder="小区/写字楼/学校" v-model="search_val">
        <a-icon slot="prefix" type="search"></a-icon>
      </a-input>
    </div>
    <div class="area">
      <ul class="area_list" v-for="(item, index) in areaList" :key="index">
        <li @click="selectAddress(item)">
          <h4>{{item.name}}</h4>
          <p>{{item.district}}{{item.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  components: { TopHeader },
  data() {
    return {
      city:'',
      search_val: "",
      areaList: [],
    };
  },
  watch: {
    search_val() {
      this.searchPlace();
    },
  },
  computed:{
    tempAddress(){
      return this.$store.getters.tempAddress;
    }
  },
  methods: {
    searchPlace() {
      const self=this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: self.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(self.search_val, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          self.areaList=result.tips;
        });
      });
    },
    selectAddress(item){
       if(item){
         this.tempAddress.address_location=item.district+item.address+item.name;
         this.$router.push({name:'AddAddress'});
       }
    }
  },
};
</script>
<style scoped>
</style>